<template>
    <div class="a-form-item c-position-relative">
        <div
            class="error-message c-font-size-xs c-position-absolute"
            v-if="validator.valid === false"
            :style="[
                form?.myLabelWidth != null
                    ? `margin-left: ${form.myLabelWidth}px;`
                    : '',
            ]"
        >
            {{ validator.errorMessage }}
        </div>
        <div
            class="diff-tips c-font-size-xs c-position-absolute"
            :class="{ error: !diff.valid }"
        >
            {{ diff.text }}
        </div>
        <a-control-group :block="true" :type="'block'" class="c-g-h-auto-1fr">
            <a-tooltip :size="mySize" :sharp="mySharp" :tips="tips" v-if="tips">
                <a-label ref="label" class="c-position-relative">
                    <span
                        v-if="withTipsFlag && form?.labelAlign == 'right'"
                        class="fa fa-fw fa-question-circle-o"
                    ></span>
                    <span>{{ label }}</span>
                    <span
                        v-if="
                            withTipsFlag &&
                            (form?.labelAlign == 'left' ||
                                form?.labelAlign == 'center')
                        "
                        class="fa fa-fw fa-question-circle-o"
                    ></span>
                    <div
                        v-if="myRequired"
                        class="required-tag c-position-absolute c-f-h c-f-center-center"
                        :class="`c-color-${myColor}`"
                    >
                        *
                    </div>
                </a-label>
            </a-tooltip>
            <a-label ref="label" class="c-position-relative" v-else>
                <span>{{ label }}</span>
                <div
                    v-if="myRequired"
                    class="required-tag c-position-absolute c-f-h c-f-center-center"
                    :class="`c-color-${myColor}`"
                >
                    *
                </div>
            </a-label>
            <slot></slot>
        </a-control-group>
    </div>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.error-message {
    color: red;
    left: 0;
    top: 100%;
    word-break: keep-all;
    user-select: none;
    pointer-events: none;
}
.diff-tips {
    color: $defaultShadowColor;
    right: 0;
    top: 100%;
    user-select: none;
    pointer-events: none;

    &.error {
        color: red;
    }
}
.required-tag {
    background-color: transparent;
    top: 0;
    right: 4px;
    user-select: none;
    pointer-events: none;
}
</style>

<script>
import ATooltip from './ATooltip.vue'
import AControlGroup from './AControlGroup.vue'
import ALabel from './ALabel.vue'

export default {
    name: 'AFormItem',
    components: { ATooltip, AControlGroup, ALabel },
    inject: {
        form: {
            from: 'form',
            default: null
        },
    },
    props: {
        color: {
            type: String,
            default: null,
        },
        disabled: {
            type: Boolean,
            default: null,
        },
        size: {
            type: String,
            default: null,
        },
        sharp: {
            type: Boolean,
            default: null,
        },
        label: {
            type: String,
        },
        tips: {
            type: String,
        },
        labelPlain: {
            type: Boolean,
            default: null
        },
        withTipsFlag: {
            type: Boolean,
            default: true
        },
        required: {
            type: Boolean,
            default: null
        },
    },
    data() {
        return {
            validator: {
                valid: null,
                errorMessage: null,
            },
            diff: {
                valid: null,
                text: null
            },
            inputRequired: false,
        }
    },
    computed: {
        myColor() {
            return this.color ?? this.form?.color ?? 'default'
        },
        myDisabled() {
            return this.disabled ?? this.form?.disabled ?? false
        },
        mySize() {
            return this.size ?? this.form?.size ?? 'm'
        },
        mySharp() {
            return this.sharp ?? this.form?.sharp ?? false
        },
        myRequired() {
            return this.required ?? this.inputRequired
        }
    },
    methods: {
        setValidateResult(valid, errorMessage) {
            this.validator.valid = valid
            this.validator.errorMessage = errorMessage
        },
        setDiffResult(valid, text) {
            this.diff.valid = valid
            this.diff.text = text
        },
        setInputRequired(val) {
            this.inputRequired = val
        },
    },
    provide() {
        return {
            formItem: this
        }
    }
}
</script>